<template>
	<view class="uni-body">
		<view class="search">
			<uni-search-bar class="uni-mt" radius="5" placeholder="请输入门店" clearButton="auto" cancelButton="none"
				@confirm="search" bgColor="#fff" />
		</view>
		<!-- 条件区域 -->
		<view class="uni_data_select"><uni-data-select v-model="query.order" :localdata="range" @change="change"
				:clear="false" custom-class="custom_select"></uni-data-select></view>
		<!-- list -->
		<uni-list>
			<uni-list-item :showArrow="false">
				<template v-slot:header>
					<view class="slot-box">
						<image class="slot-image" src="/static/swiper1.png" mode="widthFix"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="shop_detail">
						<view class="info">
							<view class="name">{{'图师傅修车'}}</view>
							<view class="uni_rate"><uni-rate v-model="rateValue" :size="18" />{{4}}分<view class="sale">
									销量:{{111}}</view>
							</view>
							<view class="work_time">营业时间:{{111111}}</view>
							<view class="address">{{'中原区雪松路'}}</view>
						</view>
						<view class="distance">
							{{2}}m
						</view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item :showArrow="false">
				<template v-slot:header>
					<view class="slot-box">
						<image class="slot-image" src="/static/swiper1.png" mode="widthFix"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="shop_detail">
						<view class="info">
							<view class="name">{{'图师傅修车'}}</view>
							<view class="uni_rate"><uni-rate v-model="rateValue" :size="18" />{{4}}分<view class="sale">
									销量:{{111}}</view>
							</view>
							<view class="work_time">营业时间:{{111111}}</view>
							<view class="address">{{'中原区雪松路'}}</view>
						</view>
						<view class="distance">
							{{2}}m
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="no_more">
			暂无更多
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					name: '',
					order: 0
				},

				//排序
				range: [{
						value: 0,
						text: "综合排序"
					},
					{
						value: 1,
						text: "距离最近"
					},
					{
						value: 2,
						text: "评分最高"
					}, {
						value: 3,
						text: "销量最高"
					},
				],
				list: [],
			}
		},
		methods: {
			//排序更改
			change(e) {
				console.log("e:", e);
			},
			search(res) {
				this.query.name = res.value;
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
		}
	}
</script>

<style scoped>
	.uni-body {
		height: 100vh;

		background-color: white;
	}

	.search {
		background-color: #EFEFF5;
	}

	.uni-mt {
		margin-top: 10px;
	}

	.uni_data_select {
		width: 200rpx;
	}

	/deep/ .uni-select {
		border: none;
	}

	.slot-image {
		width: 250rpx;
		padding-top: 15rpx;
	}

	.shop_detail {
		width: 100vw;
		padding-left: 40rpx;
		position: relative;
	}

	.shop_detail image {
		width: 200rpx;
		height: 140rpx;
		padding-top: 10rpx;
	}

	.shop_detail>view:nth-child(2) {
		width: 85rpx;
		height: 40rpx;
		color: #1D6FFF;
		position: absolute;
		top: 10rpx;
		left: 360rpx;
	}

	.info {
		width: 65vw;
		display: inline-block
	}

	.name {
		font-size: 33rpx;
		font-weight: bold;
		padding-top: 20rpx;
	}

	.uni_rate {
		width: 100%;
		font-size: 24rpx;
		padding-bottom: 10rpx;
		display: flex;
		line-height: 40rpx;
	}

	.sale {
		padding-left: 20rpx;
	}

	.work_time,
	.address {
		color: #545454;
	}

	.no_more {
		font-size: 30rpx;
		color: #373737;
		text-align: center;
		line-height: 30rpx;
		padding-top: 20rpx;
	}
</style>